<script lang="ts" setup>
// @ts-ignore
let siteTitle = defineProps({
    title: '' as any
});
const progress = ref(0)
function percent():void {
    setTimeout(() => {
        progress.value = Number(
            ((window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight)) * 100).toFixed(0)
        )
    }, 0)
}
function goTop():void {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
}
onMounted(()=>{
    document.addEventListener('scroll', percent)
})
onUnmounted(()=>{
    document.removeEventListener('scroll', percent)
})
</script>
<template>
    <nav id="site-navigation" class="navigation-main header-area" role="navigation">
        <!-- site-logo -->
        <div class="site-logo">
            <a href="/" title="风起" rel="home" role="button">
                <Logo/>
            </a>
        </div>
        <!-- site-menu -->
        <div class="site-menu">
            <input type="checkbox" id="menu-open" class="hidden">
            <label for="menu-open" class="iconfont out menu-open icon-daohang-fill" role="button"></label>
            <Menu/>
        </div>
        <!-- site-icon -->
        <div class="site-icon">
            <a class="iconfont out icon-subway-fill tips" href="//www.travellings.cn/go.html" target="_blank"
               title="离开这里并访问下一个博客「开往服务」" role="button"></a>
            <a role="button" class="iconfont out icon-random-fill tips" title="前往WordPress博客「www.yanyuplus.cn」"
               href="//yanyuplus.cn"></a>
            <a class="iconfont out icon-mulu post-menu tips" href="#main" title="返回首行">
                <div class="site-title">{{ siteTitle.title }}</div>
            </a>
            <!-- 回到顶部 -->
            <div class="go-top" title="回到顶部" @click.stop.prevent="goTop">
                <i class="iconfont btn none"></i>
                <i class="percent">{{ progress }}</i>
            </div>
            <!-- 全站动态面板 -->
            <input type="checkbox" id="menu-toggle" class="hidden dialog-check is-widget">
            <label for="menu-toggle" class="widget" title="打开全站动态面板" role="button">
                <i class="left"></i>
                <i class="widget center"></i>
                <i class="widget right"></i>
            </label>
            <Widgets/>
            <div class="nav-bg blur-saturate"></div>
        </div>
    </nav>
</template>
